<template>
    <div class="container">
      <div class="descrips">
        <div class="score">
          {{i}}.<b>（填空题 {{detail.totalScore.toFixed(1)}}分）</b>
        </div>
        <template v-for="(item, index) in detail.descrips">
          <p v-if="item.type == 'fulltext'" :key="index" class="title">{{item.content}}</p>
        </template>
      </div>
      <div class="option">
        <div v-for="item in detail.options" class="option-item">
          <p>{{item.code}}<b>.</b></p>
          <p>{{item.content}}</p>
        </div>
      </div>
      <div class="answer">
        <div class="answer-block">
          <div class="student">
            <div class="p-title">学生答案：</div>
            <div v-for="(item, index) in detail.studentAnswer.blanks" :key="index" class="p-wrap">
              <div class="paragraph">({{index + 1}})</div>
              <div class="paragraph">{{item}}</div>
            </div>
          </div>
          <div class="right">
            <div class="p-title">正确答案：</div>
            <div v-for="(item, index) in detail.answer.blanks" :key="index" class="p-wrap">
              <div class="paragraph">({{index + 1}})</div>
              <div class="paragraph">{{item}}</div>
            </div>
          </div>
          <div class="result">
            得分：<el-input class="score-input" v-model="form.score" size="mini" />分
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Basic",
    props: {
      i: {
        type: Number,
        default: 1
      },
      initVal: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        detail: {
          totalScore: 5.0,
          descrips: [{
            type: 'fulltext',
            content: '这是一段填空题，第一空—__，第二空__。'
          }],
          answer: { blanks: ['这是第一空答案', '这是第一空答案'] },
          studentAnswer: { blanks: ['学生一空答案', '学生二空答案'] },
        },
        form: {
          score: 0,
        }
      }
    },
    watch: {
      'initVal.score': {
        handler(val) {
          if (val) {
            this.form = { score: val };
          }
        }
      },
      'form.score': {
        handler(val) {
          this.$emit('change', val);
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import './index.scss';
  </style>
  